<template>
  <div class="page-warapper">
    <!-- 顶部工具栏 -->
    <PageTools :show-before="true">
      <template #before>信息有{{ total }}</template>
      <template #after>
        <el-button type="primary" size="small" @click="isShowDialog=true">新增</el-button>
        <el-button type="info" size="small" @click="$router.push('/employees/import')">导入</el-button>
        <el-button type="warning" size="small" @click="export2Excel">导出</el-button>
        <EmployessDialog :is-show-dialog="isShowDialog" @loadLin="loadList" @cancel="isShowDialog=false" />
        <!-- 附加窗口
         -->
      </template>
    </PageTools>
    <!-- 主要表格 -->

    <el-card>
      <el-table border :data="list">
        <el-table-column label="序号" sortable="" type="index" />
        <el-table-column label="姓名" sortable="" prop="username" />
        <el-table-column label="工号" sortable="" prop="workNumber" />
        <el-table-column label="聘用形式" sortable="" prop="formOfEmployment" :formatter="formatEmployment" />
        <el-table-column label="部门" sortable="" prop="departmentName" />
        <el-table-column v-slot="scoped" label="入职时间" sortable="">
          {{ scoped.row.timeOfEntry | formatDate }}
        </el-table-column>
        <el-table-column label="账户状态" sortable="">
          <template v-slot="scope">
            <el-switch
              v-model="scope.row.enableState"
              disabled
              :active-value="1"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" sortable="" fixed="right" width="280">
          <template v-slot="scope">
            <el-button type="text" size="small" @click="$router.push(`/employees/detail/${scope.row.id}`)">查看</el-button>
            <el-button type="text" size="small" @click="showrole(scope.row.id)">角色</el-button>
            <el-button type="text" size="small" @click="delEmployee(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          :total="total"
          :page-size="pageCance.size"
          layout="prev, pager, next"
          @current-change="crrentpage"
        />
        <AssignEole ref="roleForm" :is-show-dialog="isShowRoleDialog" @closeDialog="isShowRoleDialog=false" />
      </el-row>
    </el-card>

  </div>
</template>

<script>
import { export_json_to_excel } from '@/vendor/Export2Excel'
import { getEmployee, delEmployee } from '@/api/employee'
import EmployeeEnum from '@/constant/employees'
import { formatDate } from '@/filters'
import EmployessDialog from './components/employess-dialog.vue'
import AssignEole from './components/assign-role.vue'
import { getUserDetailById } from '@/api/user'
export default {
  components: {
    EmployessDialog,
    AssignEole
  },
  data() {
    return {
      isShowRoleDialog: false,
      isShowDialog: false,
      list: [],
      total: 0,
      pageCance: {
        page: 1,
        size: 5
      }
    }
  },
  created() {
    this.loadList()
  },
  methods: {
    // 角色
    async showrole(userId) {
      this.isShowRoleDialog = true
      const res = await getUserDetailById(userId)
      // console.log('获取数据', res)
      // 发送给子组件中的checkList
      this.$refs.roleForm.checkList = res.roleIds
      this.$refs.roleForm.id = userId
    },
    async export2Excel() {
      const arr = await getEmployee({
        page: 1,
        size: this.total

      })
      console.log('所有员工数据', arr)
      const header = ['工号', '姓名', '手机号', '聘用形式', '入职时间']
      const data = arr.rows.map(inde => {
        const user = []
        user.push(inde.workNumber)
        user.push(inde.username)
        user.push(inde.mobile)
        // 聘用形式使用枚举的方法
        let str = ''
        EmployeeEnum.hireType.forEach(el => {
          if (Number(el.id) === Number(inde.formOfEmployment)) {
            str = el.value
          }
        })

        user.push(str)
        // 时间另外处理
        user.push(formatDate(inde.timeOfEntry))
        return user
      })
      export_json_to_excel({
        header,
        data
      })
    },
    // 获取数据条数，页数
    async loadList() {
      const res = await getEmployee(this.pageCance)
      // console.log('aa', res)
      this.list = res.rows
      this.total = res.total
      // console.log('数据', this.list)
    },
    crrentpage(newpage) {
      this.pageCance.page = newpage
      this.loadList()
    },
    formatEmployment(row, column, cell) {
      // 第一种写法
      // if (cell === 1) {
      //   return '正式工'
      // }
      // if (+cell === 2) {
      //   return '临时工'
      // }
      // 第二钟写法
      // const add = [
      //   { id: 1, value: '正式工' },
      //   { id: 2, value: '临式工' }
      // ]
      let rew = ''
      EmployeeEnum.hireType.forEach(inde => {
        if (Number(inde.id) === Number(cell)) {
          rew = inde.value
        }
      })
      return rew
    },
    // 删除
    async delEmployee(id) {
      // 二次询问
      await this.$confirm('是否确认删除')
      // 发送请求
      await delEmployee(id)
      // 提醒用户删除成功
      this.$message.success('删除成功')

      // 进行向上翻页
      if (this.pageCance.page > 1 && this.list.length === 1) {
        this.pageCance.page--
      }
      this.loadList()
    }
  }
}
</script>

<style>

</style>
